UI Pixel perfection: Project listing, Project details page and tabs, Project creation - #97
Conversation
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR introduces shared secondary text theming and updates typography, spacing, colors, borders, controls, project listings, project details, and project wizard layouts. It also replaces project view-toggle icon variants with imported SVG assets and capitalizes the zero-progress task summary. ChangesWorkspace UI refresh
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
pages/workspace/[id]/projects/[projectId]/index.vue (1)
1090-1105: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAlign the footer shell radius with the new base radius.
.project-detail-shell-with-footerstill setsborder-radius: 1rem 1rem 0 0at Line 1104, so instances using that modifier retain rounded top corners despite the new zero-radius base rule.Proposed fix
.project-detail-shell-with-footer { border-bottom: 0; - border-radius: 1rem 1rem 0 0; + border-radius: 0; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@pages/workspace/`[id]/projects/[projectId]/index.vue around lines 1090 - 1105, Update the .project-detail-shell-with-footer modifier to remove its rounded top corners and use the same zero-radius styling as .project-detail-shell, while preserving its existing border-bottom behavior.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@pages/workspace/`[id]/projects/[projectId]/index.vue:
- Around line 1303-1308: Restore the color declaration in the
.project-detail-summary-item span rule by uncommenting the existing $text-navy
value, keeping the font-size, font-weight, and min-width declarations unchanged.
- Around line 1141-1149: Remove the small-screen mobile override that sets
.project-detail-title to 2.2rem, leaving the base 26px font-size as the applied
typography across screen sizes.
In `@pages/workspace/`[id]/projects/index.vue:
- Around line 74-79: Update the view-toggle image in the option rendering to use
an empty alt attribute so it is decorative, while retaining the visually hidden
span with option.label as the sole accessible name.
---
Outside diff comments:
In `@pages/workspace/`[id]/projects/[projectId]/index.vue:
- Around line 1090-1105: Update the .project-detail-shell-with-footer modifier
to remove its rounded top corners and use the same zero-radius styling as
.project-detail-shell, while preserving its existing border-bottom behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9c6417eb-ed5a-4a97-a190-27fa1e50fa7a
⛔ Files ignored due to path filters (2)
assets/img/grid.svgis excluded by!**/*.svgassets/img/list.svgis excluded by!**/*.svg
📒 Files selected for processing (17)
assets/scss/main.scssassets/scss/theme.scsscomponents/project-wizard/steps/AreaOfInterestStep.vuecomponents/project-wizard/steps/ProjectDetailsStep.vuecomponents/project-wizard/steps/ReviewStep.vuecomponents/project-wizard/steps/SettingsStep.vuecomponents/workspace-project-details/ContributionsTab.vuecomponents/workspace-project-details/RichTextContent.vuecomponents/workspace-project-details/SelectedTaskBar.vuecomponents/workspace-project-details/TasksTab.vuecomponents/workspace-projects/ProjectCard.vuecomponents/workspace-projects/ProjectListRow.vuecomponents/workspace-projects/StatusBadge.vuecomposables/useProjectDisplay.tspages/workspace/[id]/projects/[projectId]/index.vuepages/workspace/[id]/projects/create.vuepages/workspace/[id]/projects/index.vue
💤 Files with no reviewable changes (1)
- components/project-wizard/steps/ProjectDetailsStep.vue
| .project-detail-title { | ||
| max-width: 44rem; | ||
| margin: 0; | ||
| color: #1a1e3d; | ||
| font-family: var(--secondary-font-family); | ||
| font-size: clamp(1rem, 2vw, 2rem); | ||
| color: $text-navy; | ||
| font-size: 26px; | ||
| font-weight: 600; | ||
| line-height: 1.18; | ||
| letter-spacing: -0.03em; | ||
| line-height: 1.4; | ||
| // letter-spacing: -0.03em; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Remove the contradictory mobile title override.
The base title is now set to 26px, but Line 1377 still changes it to 2.2rem (35.2px) on small screens. That makes the mobile title larger than the desktop title and defeats the new fixed typography.
[details]
`@include` media-breakpoint-down(md) {
.project-detail-title {
- font-size: 2.2rem;
+ font-size: 26px;
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .project-detail-title { | |
| max-width: 44rem; | |
| margin: 0; | |
| color: #1a1e3d; | |
| font-family: var(--secondary-font-family); | |
| font-size: clamp(1rem, 2vw, 2rem); | |
| color: $text-navy; | |
| font-size: 26px; | |
| font-weight: 600; | |
| line-height: 1.18; | |
| letter-spacing: -0.03em; | |
| line-height: 1.4; | |
| // letter-spacing: -0.03em; | |
| } | |
| `@include` media-breakpoint-down(md) { | |
| .project-detail-title { | |
| font-size: 26px; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@pages/workspace/`[id]/projects/[projectId]/index.vue around lines 1141 -
1149, Remove the small-screen mobile override that sets .project-detail-title to
2.2rem, leaving the base 26px font-size as the applied typography across screen
sizes.
| .project-detail-summary-item span { | ||
| color: #1a1e3d; | ||
| font-size: 1.05rem; | ||
| font-weight: 700; | ||
| // color: $text-navy; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| min-width: 120px; | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Restore the summary-label color declaration.
Line 1304 is a SCSS comment, so .project-detail-summary-item span has no explicit color and inherits the generic body color instead of the intended theme color.
Proposed fix
.project-detail-summary-item span {
- // color: $text-navy;
+ color: $text-navy;
font-size: 16px;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .project-detail-summary-item span { | |
| color: #1a1e3d; | |
| font-size: 1.05rem; | |
| font-weight: 700; | |
| // color: $text-navy; | |
| font-size: 16px; | |
| font-weight: 600; | |
| min-width: 120px; | |
| } | |
| .project-detail-summary-item span { | |
| color: $text-navy; | |
| font-size: 16px; | |
| font-weight: 600; | |
| min-width: 120px; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@pages/workspace/`[id]/projects/[projectId]/index.vue around lines 1303 -
1308, Restore the color declaration in the .project-detail-summary-item span
rule by uncommenting the existing $text-navy value, keeping the font-size,
font-weight, and min-width declarations unchanged.
2 participants
Summary